import { Progress, Col, Row } from 'antd'

import styles from './index.module.less'

import today from '../../assets/images/today.png'
import submit from '../../assets/images/submit.png'
import unsubmitted from '../../assets/images/unsubmitted.png'
import todayTag from '../../assets/images/today-tag.png'
import submitTag from '../../assets/images/submit-tag.png'
import unsubmittedTag from '../../assets/images/unsubmitted-tag.png'

import { CardList } from '@/@types'
import { isNullArray } from '@/utils'

interface CardProps {
  cardList: CardList[]
}

export default (props: CardProps) => {
  const { cardList } = props
  // 图片
  const imgs: any = {
    today,
    submit,
    unsubmitted,
    todayTag,
    submitTag,
    unsubmittedTag,
  }

  return (
    <Row gutter={23}>
      {isNullArray(cardList) &&
        cardList.map((item) => (
          <Col key={item.id} span={8}>
            <div className={styles['card-info']} style={{ backgroundImage: `url(${imgs[item.img]})` }}>
              <div className={styles['card-info-title']} style={{ marginBottom: '16px' }}>
                {item.committedTitle}
              </div>
              <div style={{ marginBottom: '6px' }}>
                {item.img === 'today' && (
                  <span className={styles.filledin}>
                    {item.committedHospitalAllNum ? item.committedHospitalAllNum : 0}
                  </span>
                )}
                {item.img === 'submit' && (
                  <>
                    <span className={styles.filledin}>{item.committedHospitalNum ? item.committedHospitalNum : 0}</span>
                    <span className={styles.total}>/{item.committedHospitalAllNum}</span>
                  </>
                )}
                {item.img === 'unsubmitted' && (
                  <>
                    <span className={styles.filledin}>
                      {item.noCommittedHospitalNum ? item.noCommittedHospitalNum : 0}
                    </span>
                    <span className={styles.total}>/{item.committedHospitalAllNum}</span>
                  </>
                )}
              </div>
              {item.strokeColor && (
                <>
                  {item.tag === 'unsubmittedTag' ? (
                    <div className={styles.fillRate}>未填报率：{item.committedHospitalRate}%</div>
                  ) : (
                    <div className={styles.fillRate}>填报率：{item.committedHospitalRate}%</div>
                  )}
                  <Progress
                    style={{ width: '88px' }}
                    showInfo={false}
                    trailColor={item.trailColor}
                    strokeColor={item.strokeColor}
                    percent={item.committedHospitalRate}
                  />
                </>
              )}
              <div className={styles['card-tag']} style={{ backgroundImage: `url(${imgs[item.tag]})` }}></div>
            </div>
          </Col>
        ))}
    </Row>
  )
}
